<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>签到签退</title>
    <link rel="stylesheet" type="text/css" href="__CSS__api.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__aui.css" />
    <style>
        html {
            width: 100%;
            height: 100%;
        }

        body {
            width: 100%;
            height: 100%;
            display: flex;
            flex-flow: column;
        }

        .aui-bar-nav .aui-iconfont {
            position: relative;
            font-family: "aui_iconfont" !important;
            font-size: 0.75rem;
            color: #E73C5C;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            height: 2.4rem;
        }

        .aui-bar-nav {
            background-color: #fff;
        }

        .aui-icon-tu {
            height: 2.4rem;
            width: 49px;
            background: url('__IMG__left.png') no-repeat 0.5rem center;
            background-size: 22px 22px;
        }

        .aui-bar-nav .aui-pull-right {
            padding-right: 0.75rem;
        }

        .aui-bar-nav .aui-title {
            font-size: 0.9rem;
            color: #333333;
            font-weight: 500;
        }

        .time-table {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 2.5rem;
            height: 6.075rem;
            background-color: white;
            margin-bottom: 0.525rem;
        }

        .time {
            color: #333333;
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 0.725rem;
            text-align: center;
        }

        .type {
            color: #999999;
            font-size: 0.65rem;
            font-weight: 500;
            text-align: center;
        }

        .button-area {
            flex: 1;
            display: flex;
            align-items: center;
            flex-flow: column;
            background-color: white;
            padding-top: 1.825rem;
        }

        .btn-checkin {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-flow: column;
            width: 7.65rem;
            height: 7.65rem;
            background: url("__IMG__checkin.png") center center no-repeat;
            background-size: 7.65rem;
            margin-bottom: 0.325rem;
        }

        .btn-checkout {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-flow: column;
            width: 7.65rem;
            height: 7.65rem;
            background: url("__IMG__checkout.png") center center no-repeat;
            background-size: 7.65rem;
            margin-bottom: 0.325rem;
        }

        .type1 {
            color: #FFFFFF;
            font-size: 0.9rem;
        }

        .time1 {
            color: #FFFFFF;
            font-size: 0.7rem
        }

        .word {
            display: flex;
            align-items: center;
            color: #999999;
            font-size: 0.7rem;
        }

        .icon-locate {
            width: 0.75rem;
            height: 0.75rem;
            background: url("__IMG__locate.png") center center no-repeat;
            background-size: 0.75rem;
            margin-right: 0.25rem;
            position: relative;
            top: -2px
        }
    </style>
</head>

<body>
<header class="aui-bar aui-bar-nav underLine" style="padding-top:25px;" id="header">
    <a class="aui-pull-left" tapmode="active" onclick="history.go(-1)"> <span class="aui-iconfont aui-icon-tu"> </span> </a>
    <div class="aui-title">签到</div>
</header>
<div class="time-table">
    <div class="checkin-time">
        <div class="time">--</div>
        <div class="type">签到时间</div>
    </div>
    <div class="checkout-time">
        <div class="time">--</div>
        <div class="type">签退时间</div>
    </div>
</div>
<div class="button-area">
    <div class="btn-checkin" tapmode onclick="checkin()" id="btn">
        <span class="type1" id="type1">签到</span>
        <span class="time1" id="time1"></span>
    </div>
    <div class="word"><div class="icon-locate"></div>您已进入签到范围：<span id='loaclll'></span></div>
</div>
<input type="hidden" name="id" value="{$id}">
</body>
<script type="text/javascript" src="__JS__api.js"></script>
<script type="text/javascript" src="__JS__jquery.min.js"></script>

<script type="text/javascript" src="__JS__tt.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=GZSILhN6GDZpDkdku64uWWnGTgTBQmzX"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" src="__JS__/layer_mobile/layer.js"></script>
<script>

    var nowLon = '';
    var nowLat = '';
    wx.config({$json});
    wx.ready(function () {
        wx.error(function(res){
            alert("接口调取失败")
        });
        wx.checkJsApi({
            jsApiList: [
                'getLocation'
            ],
            success: function (res) {
                if (res.checkResult.getLocation == false) {
                    alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');
                    return;
                }
            },
            error:function (res) {
                alert('res-error')
            }
        });
        wx.getLocation({
            success: function (res) {
                //1、微信接口获取用户经纬度
                 nowLon = res.longitude;
                 nowLat = res.latitude;
                if(nowLon==''||nowLat==''){
                    layer.open({
                        content: '请开启微信定位功能'
                        ,skin: 'msg'
                        ,time: 3 //2秒后自动关闭
                    });
                    return false;
                }
                aaa();
            },
            cancel: function (res) {
                alert('获取位置失败');
            }
        });
    });
</script>
<script>
    var t1;
    var qianMax='';//范围
    var qianMin='';//范围
    var toLat='';//
    var toLon='';//

    var checkType = 2; //1.未签到,2.已签到,未签退,3.已签到签退
    var isChack='';//1不限制签到范围 2限制签到范围
    function aaa() {
        var idd = $('input[name="id"]').val();
        $.ajax({
            url:'{:url("First/signActibity")}',
            data:{'id':idd},//
            type:'POST',
            dataType:'json',
            success:function (data) {
                var successData = data.data;
                if(data.status==200){
                    $api.byId('loaclll').innerHTML=successData.activity_address||'';
                    qianMax=successData.max||'';//范围
                    qianMin=successData.min||'';//范围
                    toLat=successData.activity_latitude||'';//经纬度
                    toLon=successData.activity_longitude||'';//经纬度

                    isChack=successData.rang||'';//是否限制签到范围

                    if(isChack=='2'){
                        if(nowLon==''||nowLat==''){
                            layer.open({
                                content: '请开启微信定位功能'
                                ,skin: 'msg'
                                ,time: 3 //2秒后自动关闭
                            });
                            return false;
                        }
                    }

                    if(successData.sign_time_member=='0000-00-00 00:00:00'){
                        successData.already_sign='1';
                    }


                    if(successData.already_sign=='3'){
                        checkType='3';
                        $api.byId('btn').className = 'btn-checkout';
                        $api.byId('type1').innerHTML = '签退';
                        $api.dom('.checkin-time .time').innerHTML = timePan(2,successData.sign_time_member)||'';
                        $api.dom('.checkout-time .time').innerHTML = timePan(2,successData.sign_end_time_member)||'';

                    }else if(successData.already_sign=='2'){
                        checkType='3';
                        $api.byId('btn').className = 'btn-checkout';
                        $api.byId('type1').innerHTML = '签退';
                        $api.dom('.checkin-time .time').innerHTML = timePan(2,successData.sign_time_member)||'';
                    }


                    nowTime=Number(successData.time)*1000;
                    t1 = setInterval(function() {
                        getTime=nowTime+1000;
                        $api.byId('time1').innerHTML=formatDuring2(getTime);
                        nowTime=getTime;
                    }, 1000);
                }
            }
        })
    }
    //签到,签退
    function checkin() {
        //限制签到距离
        if(isChack=='2'&&checkType!='3'){

            if(nowLat==''||nowLon==''){

                layer.open({
                    content: '请开启微信定位功能'
                    ,skin: 'msg'
                    ,time: 3 //2秒后自动关闭
                });
//                showLocal();
                return
            }

            var jisuanJuLi=Number(GetDistance(nowLat,nowLon,toLat,toLon));
            var maxxx=Number(qianMax);
            var minnn=Number(qianMin);

            if(maxxx>jisuanJuLi&&minnn<jisuanJuLi){
                if(checkType=='3'){
                    toQianDao2();//签退
                }else{
                    toQianDao();//签到
                }
            }else{

//                alert(不在规定范围内);
                layer.open({
                    content: '不在规定范围内'
                    ,skin: 'msg'
                    ,time: 3 //2秒后自动关闭
                });
                return false;

            }

        }else{
            //不限制距离
            if(checkType=='3'){
                toQianDao2();//签退
            }else{
                toQianDao();//签到
            }
        }
    }
    //签到
    function toQianDao(){
        var idd = $('input[name="id"]').val();
        $.ajax({
            url:'{:url("First/SignIn")}',
            data:{'id':idd},//
            type:'POST',
            dataType:'json',
            success:function (data) {
                if(data.status==200){
                    layer.open({
                        content: '签到成功'
                        ,skin: 'msg'
                        ,time: 3 //2秒后自动关闭
                    });
                    setTimeout(function () {
                        window.location.reload();
                    },1500)

//                location.href='{:url("First/activitydatail")}?activity_id='+data.data;
                }else{
                    layer.open({
                        content: data.msg
                        ,skin: 'msg'
                        ,time: 3 //2秒后自动关闭
                    });
                }
            }
        })
    }

    function toQianDao2(){
        var idd = $('input[name="id"]').val();
        $.ajax({
            url:'{:url("First/SignBack")}',
            data:{'id':idd},//
            type:'POST',
            dataType:'json',
            success:function (data) {
                if(data.status==200){
                    layer.open({
                        content: '签到成功'
                        ,skin: 'msg'
                        ,time: 3 //2秒后自动关闭
                    });
                    location.href='{:url("First/activitydatail")}?activity_id='+data.data;
                }else{
                    layer.open({
                        content: data.msg
                        ,skin: 'msg'
                        ,time: 3 //2秒后自动关闭
                    });
                }
            }
        })
    }
</script>



</html>